<template>
    <div>
        <van-sticky>
            <van-nav-bar title="意见反馈" left-text="返回" right-text="提交" left-arrow @click-left="onClickLeft"
                @click-right="onClickRight" />
        </van-sticky>
        <div class="user">
            用户 : {{userinfo.userName}}
            <div class="adviceText">
                <textarea name="" id="" cols="30" rows="10" v-model="text" class="advice"
                    placeholder="Hi,请输入你的反馈和建议吧~"></textarea>
                <div class="triangle"></div>

            </div>
        </div>
        <div class="question">
            <h1>反馈记录</h1>
            <div class="adviceList">
                <p v-for="item in feekbackList" :key="item.id">
                    {{item.content}}
                </p>
            </div>
        </div>

    </div>
</template>
<script>
import nav from "@/mixin/nav";
import { userInfo, userFeekback, userAddFeekback } from "@/service/user/userLogin";
export default {
    mixins: [nav],
    data() {
        return {
            userinfo: {},
            text: "",
            feekbackList: [],
        }
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        async onClickRight() {
            let { data } = await userAddFeekback({
                content: this.text
            })
            console.log(data);
            if (data.code == 200) {
                this.$toast.success("提交成功");
                this.text = "";
                let { data: list } = await userFeekback();
                console.log(list);
                this.feekbackList = list.rows;
            }
        }
    },
    async created() {
        let { data } = await userInfo();
        console.log(data);
        this.userinfo = data.user;
        let { data: list } = await userFeekback();
        console.log(list);
        this.feekbackList = list.rows;

    }
}

</script>
<style scoped lang="scss">
.user {
    height: 250px;
    padding-left: 50px;
    padding-top: 30px;
    font-size: 20px;
    background-color: #EDEDED;
    position: relative;
}

.question {
    padding: 10px;
    line-height: 40px;

    p {
        border-bottom: 1px solid #EDEDED;
    }
}

.advice {
    padding: 10px;
    width: 300px;
    height: 150px;
    position: absolute;
    left: 30px;
    bottom: 20px;
    border: none;
    border-radius: 10px;
    resize: none;
}

.triangle {
    position: absolute;
    left: 50px;
    top: 60px;
    width: 0px;
    height: 0px;
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;
    border-left: 10px solid transparent;
}
</style>